<template>
  <su-popup :show="show" type="right" @close="$emit('close')">
    <view class="drawer-content">
      <view class="drawer-title">筛选</view>
      <view v-for="item in filterOptions" :key="item.key" class="drawer-item">
        <text class="drawer-label">{{item.label}}</text>
        <!-- 标签式选择 -->
        <view v-if="item.type==='select'" class="drawer-tags">
          <view v-for="opt in item.options" :key="opt.value" class="drawer-tag" :class="{selected: localFilterValues[item.key]===opt.value}" @tap="handleSelectFilter(item.key, opt.value)">{{opt.label}}</view>
        </view>
        <!-- 区间输入（如年龄） -->
        <view v-if="item.type==='range'" style="display:flex;gap:8px;align-items:center;">
          <input class="drawer-input" type="number" v-model.number="localFilterValues[item.key+'Min']" placeholder="最小值" @input="handleRangeInput(item.key, 'Min', $event)" />
          <span style="color:#bbb;">-</span>
          <input class="drawer-input" type="number" v-model.number="localFilterValues[item.key+'Max']" placeholder="最大值" @input="handleRangeInput(item.key, 'Max', $event)" />
        </view>
      </view>
      <view class="drawer-actions">
        <button @tap="handleReset">重置</button>
        <button @tap="handleApply">应用</button>
      </view>
    </view>
  </su-popup>
</template>

<script>
import SuPopup from '@/sheep/ui/su-popup/su-popup.vue';

export default {
  name: 'FilterDrawer',
  components: {
    SuPopup
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    filterOptions: {
      type: Array,
      default: () => [
        { key: 'company', label: '企业', type: 'select', options: [] },
        { key: 'region', label: '地区', type: 'select', options: [] },
        { key: 'gender', label: '性别', type: 'select', options: [ { label: '男', value: 'male' }, { label: '女', value: 'female' } ] },
        { key: 'age', label: '年龄', type: 'range', options: [] }
      ]
    },
    filterValues: {
      type: Object,
      default: () => ({})
    }
  },
  emits: ['close', 'apply', 'reset', 'update:filter-values'],
  data() {
    return {
      localFilterValues: { ...this.filterValues }
    }
  },
  watch: {
    filterValues: {
      handler(newVal) {
        this.localFilterValues = { ...newVal };
      },
      deep: true
    }
  },
  methods: {
    handleSelectFilter(key, value) {
      this.localFilterValues[key] = value;
      this.emitUpdate();
    },
    
    handleRangeInput(key, suffix, event) {
      const fullKey = key + suffix;
      const value = event.detail ? event.detail.value : event.target.value;
      this.localFilterValues[fullKey] = value ? Number(value) : null;
      this.emitUpdate();
    },
    
    emitUpdate() {
      this.$emit('update:filter-values', this.localFilterValues);
    },
    
    handleApply() {
      // 实现筛选逻辑
      console.log('筛选条件:', this.localFilterValues);
      this.$emit('apply', this.localFilterValues);
      this.$emit('close');
    },
    
    handleReset() {
      // 重置筛选条件
      this.localFilterValues = {};
      this.emitUpdate();
      this.$emit('reset');
      this.$emit('close');
    }
  }
}
</script>

<style scoped>
/* 抽屉样式参考京东App */
.drawer-content {
  width: 80vw;
  max-width: 420px;
  min-width: 280px;
  background: #fff;
  border-radius: 18px 0 0 18px;
  box-shadow: -4px 0 24px rgba(0,0,0,0.10);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-bottom: 80px;
  position: relative;
}

.drawer-title {
  font-size: 18px;
  font-weight: 600;
  padding: 22px 24px 10px 24px;
  border-bottom: 1px solid #f2f2f2;
  margin-bottom: 8px;
}

.drawer-item {
  margin: 0 24px 18px 24px;
  display: flex;
  flex-direction: column;
}

.drawer-label {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 10px;
  color: #222;
}

/* 标签选择样式 */
.drawer-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
}

.drawer-tag {
  padding: 7px 18px;
  border-radius: 18px;
  background: #f5f6fa;
  color: #333;
  font-size: 14px;
  border: 1.5px solid #f5f6fa;
  cursor: pointer;
  transition: all 0.2s;
}

.drawer-tag.selected {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
  font-weight: 600;
}

/* 输入框样式 */
.drawer-input {
  margin-top: 6px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #e5e6eb;
  font-size: 15px;
  background: #fafbfc;
  color: #222;
  outline: none;
  flex: 1;
}

/* 底部操作区 */
.drawer-actions {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 80vw;
  max-width: 420px;
  min-width: 280px;
  background: #fff;
  border-top: 1px solid #f2f2f2;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 14px 12px 18px 12px;
  z-index: 10010;
  box-sizing: border-box;
}

.drawer-actions button {
  flex: 1;
  margin: 0 2px;
  padding: 6px 8px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 500;
  border: none;
  background: #f5f6fa;
  color: #222;
  transition: all 0.2s;
  min-height: 28px;
  max-width: calc(50% - 4px);
}

.drawer-actions button:last-child {
  background: #2563eb;
  color: #fff;
  box-shadow: 0 2px 8px rgba(37,99,235,0.10);
}
</style> 